import { Spin } from 'antd';
import _ from 'lodash';

const Panel = ({ title, children, spinner = false, style, className = '', headExtra }) => {
  return (
    <div className={`panel ${className}`} style={style}>
      <Spin spinning={spinner}>
        {_.isEmpty(title)
          ? undefined
          : (
            <div className='panel-head card-head'>
              {title}
              {headExtra
                ? <div className='panel-head-extra'>{headExtra}</div>
                : undefined
              }
            </div>
          )
        }
        <div className='card-content'>
          {children}
        </div>
      </Spin>
    </div>
  );
};

const NakePanel = ({ children, style, spinner = false, className = '' }) => {
  return (
    <div className={`nake-panel ${className}`} style={style}>
      <Spin spinning={spinner}>
        {children}
      </Spin>
    </div>
  );
};

const PanelRow = ({ children }) => {
  return (
    <div className='panel-row'>
      {children}
    </div>
  );
};

export { NakePanel, PanelRow };

export default Panel;
